<template>
    <div>
        <el-card shadow="hover">
            <div>
                <el-tabs v-model="tabActive">
                    <el-tab-pane label="题目描述" name="desc">
                        <ProblemDesc></ProblemDesc>
                    </el-tab-pane>
                    <el-tab-pane label="提交记录" name="record">
                        <ProblemRed></ProblemRed>
                    </el-tab-pane>
                    <el-tab-pane label="题解" name="answer">
                        <ProblemAns></ProblemAns>
                    </el-tab-pane>
                    <el-tab-pane label="视频讲解" name="video">
                        <ProblemVideo></ProblemVideo>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-card>
    </div>
</template>

<script>
import ProblemDesc from './desc'
import ProblemAns from "./answer"
import ProblemRed from './record'
import ProblemVideo from './video'

export default {
    name: "problem-item",
    components: {
        ProblemDesc,
        ProblemAns,
        ProblemRed,
        ProblemVideo
    },
    data() {
        return {
            collapseActive: "0",
            tabActive: "desc"
        }
    },
}
</script>

<style scoped>

::v-deep .el-tabs__item {
    font-size: 16px;
}

</style>